import {PureComponent} from "react";
import React from "react";
import {Avatar, Icon, Menu} from "antd";
import {headerLogo} from "../common/Contants";
import history from "../common/route/history";

const SubMenu = Menu.SubMenu;

/**
 * 标题头界面
 */
class HeaderComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            menuItems: [
                {
                    title: "全局监控",
                    link: "/home/global_monitor",
                },
                {
                    title: "成品测试",
                    link: "/home/product_test",
                },
                {
                    title: "车辆管理",
                    link: "/home/car_manager",
                }]

        };

    }


    render() {
        return (
            <div style={headerWrapper}>
                <div
                    style={headerLogoStyle}
                />

                <ul style={headerRightStyle}>
                    <li style={rightLiNormalItemStyle} key={1} onClick={() => {
                        history.push("/home/organization_manager");
                    }}>组织管理
                    </li>
                    <li style={rightLiLineItemStyle} key={2}>|</li>
                    <li style={rightLiNormalItemStyle} key={3}>
                        <Icon type="environment" theme="twoTone" twoToneColor={"#28b779"}/>
                        <span>&nbsp;测试站点</span>
                    </li>

                    <li style={rightLiLineItemStyle} key={4}>|</li>
                    <li style={rightLiNormalItemStyle}>
                        <Avatar icon={"user"}/>
                        <span>&nbsp;超级用户</span>
                    </li>
                    <li style={rightLiLineItemStyle} key={5}>|</li>
                    <li style={rightLiNormalItemStyle} key={6}>退出</li>

                </ul>

                <Menu
                    mode={"horizontal"}
                    style={headerMenuStyle}
                >
                    {
                        this.state.menuItems.map((item, index) => {

                            return (
                                <Menu.Item
                                    key={index}
                                    onClick={() => {
                                        history.push(item.link);
                                    }}
                                >
                                    {item.title}
                                </Menu.Item>
                            );
                        })
                    }

                    <SubMenu
                        title={
                            <span className="submenu-title-wrapper">
                        我的工作台
                        <Icon type="down"/>
                        </span>
                        }
                    >
                        <Menu.Item
                            onClick={() => {
                                history.push("/home/warning_manager");
                            }}
                        >
                            报警管理
                        </Menu.Item>

                        <Menu.Item
                            onClick={() => {
                               history.push("/home/charge_manager");
                            }}
                        >
                            充电记录
                        </Menu.Item>
                    </SubMenu>
                </Menu>


            </div>
        );
    }

}

export default HeaderComponent;

const headerWrapper = {
    height: 60,
    backgroundColor: "#566bba",
    color: "#fff",
};

const headerLogoStyle = {
    float: "left",
    marginLeft: 20,
    height: "100%",
    width: 270,
    background: `url(${headerLogo}) no-repeat center center`,
};

const headerMenuStyle = {
    float: "right",
    backgroundColor: "#00000000",
    height: "100%",
    lineHeight: "60px",
    textAlign: "center",
    color: "#fff",
    borderBottom: "none",
};

const headerRightStyle = {
    float: "right",
    listStyle: "none",
    height: "100%",
    lineHeight: "60px",

    fontSize: 14,
    marginRight: 30,
};

const rightLiNormalItemStyle = {
    float: "left",
    cursor: "pointer",
};

const rightLiLineItemStyle = {
    float: "left",
    margin: "0 8px",
    transform: "scaleX(0.3)",
};